<template>
  <div id="app" >
    <!-- 页面 -->
    <div class="login">
      <div class="box1">
        <p>WELCOME</p>
        <P>——</P>
      </div>
      <div class="box2">
        <p class="title">登 录</p>
        <el-input type="text" class="input" placeholder="请输入用户名" v-model="obj.userName" v-focus></el-input>
        <el-input type="password" class="input" placeholder="请输入密码" v-model="obj.passWord"></el-input>
        <el-input type="elimage" class="elimage" placeholder="请输入验证码" v-model="obj.code"></el-input>
        <el-image :src="elimage" @click="validateCodeGetFn()"></el-image>
        <div>
          <el-checkbox class="remember fl" v-model="checked">记住密码</el-checkbox>
          <p class="forget fr">忘记密码?</p>
          <div class="clear"></div>
        </div>
        <button class="btn" @click="login()">登录 {{pass}}</button>
        <button @click="showName()">showName</button>
      </div>
      <!-- <el-image :src='bgimageSrc'></el-image> -->
    </div>
  </div>
</template>


<script>
import {
  getLoginPic,
  validateCodeGet,
  login,
  systemmenulist
  }  from "@/api/login";
import { SetCookie ,GetCookie ,RemoveCookie ,setStore}  from "@/config/config";
import RouterMain from "../../router";
export default {
  name: 'Login',
  data(){
    return{
        checked:false,
        pass:"猪八戒",
        obj:{
            userName:"",
            passWord:"",
            key:"",
            code:""
        },
        bgimageSrc:"",
        elimage:""
    }
  },
  mounted(){
    let _self = this;
    // 初始化验证码
    _self.validateCodeGetFn();
    // 初始化拿登录图片
    _self.getLoginPicFN();
    console.log(GetCookie("isRememberMe"))
    if(GetCookie("isRememberMe")){
        _self.checked = true;
        let data = JSON.parse(GetCookie("isRememberMe"));
        _self.obj.userName = data.userName;
        _self.obj.passWord = data.passWord;
    }
      document.onkeydown = function(e){
        if(e.keyCode == "13"){
            _self.login() 
        }
    }
  },
  methods:{
    // 验证码
    validateCodeGetFn(){
      let _self = this;
      validateCodeGet().then(res=>{
        console.log(res)
        _self.elimage = res.data.code;
      _self.obj.key = res.data.key;
      })
    },
    getLoginPicFN(){
      let _self = this;
      // 请求数据
      getLoginPic().then(res=>{
        console.log(res)//返回数据
        _self.bgimageSrc = res.data.backgroundImage;
      
      })
    },
    //  showName(){
    //             alert("超总NB")
    //         },
   async login(){
      let _self = this;
      //  userName:"",
      let type = false;
      //       passWord:""
      let data = {
        code:_self.obj.code,
        key:_self.obj.key,
        account:_self.obj.userName,
        pwd:_self.obj.passWord
      }
      console.log(_self.$md5(_self.obj.passWord))
      // await时 父级函数必须加async
    await  login(data).then(res=>{
        // console.log(res)
        if(res.code == 200){
          type = true;
          if(_self.checked){
            let {userName , passWord} = _self.obj;
            let data = {userName, passWord};
                SetCookie("isRememberMe" , JSON.stringify(data))
            }else{
                RemoveCookie('isRememberMe')
            }
            //token 1.相同账号同时登录后一个账号和前一个行号的token返回不一样，后端只认最新的token
            //      2.长时间不操作 登录超时 是因为token一直不发送给后端 后端就会以为这个用户已经关闭了系统自动过期
            //      3.异地登录 因为token的生成可以使IP地址成功  可以判断每次产生的token的ip是不是一个位置而提醒
           //登录成功需要将我们登录接口返回的信息进行存储 
           SetCookie("account" , res.data.account);
           SetCookie("id" , res.data.id);//假设登录时候后端说id=1 商品新增按钮就显示 id!=商品的新增按钮就不显示
          //  项目页面里面有很多操作的按钮我们根据登录时候后端返回给我们的身份的数字 显示不同的操作按钮
           SetCookie("isSms" , res.data.isSms);
           SetCookie("realName" , res.data.realName);
           SetCookie("token" , res.data.token);
          //  项目中权限怎么做
          // 1.当前用户的行为权限
          // 2.当前用户模块权限
            document.onkeydown=null;
            // doucument window 定时器 addEventListener 如果要用到跳转到其他页面时候要清干净 
          
            _self.$router.push("/home")
        }else{
          _self.$message(res.message)
          _self.validateCodeGetFn()
        }
      })
    if(type){
      await  systemmenulist().then(res=>{
        // console.log()
        if(res.code !="200" || res.data.length == 0){
          _self.$message("登录失败，请您联系管理员")
        }else{
          // 因为左侧的菜单需要用到后端返回的数据
          // 并放入到缓存中
          
           setStore("getMenus" , JSON.stringify(res.data));
          //  将后端返回的路由拼接我们的路由格式
          let routesObject = [
            {
              path:"/home",
              name:"home",
              component:()=>import(`@/view/home/home`),
              redirect:res.data[0].childList[0].component,
              children:[]
              // "" new String()  `` fun (){retrun  newString()}
              //eval() 

            }
          ];
          for(let item of res.data){
            for(let items of item.childList){
              let obj = {
                path:items.component,
                name:items.component.slice(1),
                // component:()=>import(`@/view${items.component}`),
              }
              if(item.childList.length==1){
                obj.component=()=>import(`@/view${item.component}${items.component}`)
              }else{
                obj.component=()=>import(`@/view${items.component}`)
              }

              routesObject[0].children.push(obj)
            }
          }
          routesObject[0].children.push(
            {
              path:"/store/add",
              name:"store/add",
              component:()=>import(`@/view/store/add`) 
            }
          )
          console.log(routesObject)
       
                // 将组装好的路由对象进行动态路由添加到我们的路由里面
          RouterMain.options.router = routesObject;
          RouterMain.addRoutes(routesObject);
          // _self.$router.push("/home")
          // addRoutes 动态路由添加的方法
        }
      })
    }


    },
    // 菜单
    // systemmenulist(){
    //   let _self = this;
    //   systemmenulist().then(res=>{
    //     console.log()
    //   })
    
    // }
    // login(){
    //     let _self = this;
    //     if(_self.checked){
    //         let {userName , passWord} = _self.obj;
    //         let data = {userName, passWord};
    //         SetCookie("isRememberMe" , JSON.stringify(data))
    //     }else{
    //         RemoveCookie('isRememberMe')
    //     }
    //     // _self.$router.push("/home")  _self.$router.push（路由地址）
    //     console.log(_self.$router)//vue的全局路由对象
    //     console.log(_self.$route)//当前路由的对象
    //     // _self.$router.push({
    //     //     path:"/home",//跳转路由的path
    //     //     query:{
    //     //         // query传参 页面跳转时候传递到下一个页面的参数 也是明文传参
    //     //         Lname:"小唐",
    //     //         Bname:"小张"
    //     //     }
    //     // })
    //     _self.$router.push({
    //         name:"home",
    //         params:{//params传参
    //             Lname:"小唐",
    //             Bname:"小张"
    //         }
    //     })
    // }
  }
}
</script>
// scoped 里面的样式只会影响当前的vue文件
<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  padding-top: 60px;
}
.login{
  width: 420px;
  min-width: 420px;
  margin: 0 auto;
  padding: 30px;
  background-color: #4a93f5;
  position: relative;
}
.box1{
  position: absolute;
  margin-top: -1%;
  background-color: #66a2fe;
  border-radius: 6px 50px 50px 6px;
  color: white;
  font-size: 14px;
  padding: 98px 42px;
}
.box2{
    background-color: white;
    border-radius: 6px;
    padding: 30px 40px 30px 70px;
    box-sizing: border-box;
    margin-left: 110px;
}
.title{
  font-weight: bold;
  margin-bottom: 16px;
}
.input{
  border-bottom: 1px solid #ccc;
}
.elimage{
  width: calc(100% - 100px);
}
.el-input__inner{
  border: none;
  outline: none;
  color: #333;
  font-size: 12px;
}
.forget,.remember{
  margin: 0;
  font-size: 12px;
  color: #4a93f5;
  line-height: 26px;
}
.el-checkbox__label {
  display: inline-block;
  padding-left: 0;
  line-height: 26px;
  font-size: 12px;
}
.btn{
  border: 0;
  outline: none;
  background-color: #4a93f5;
  box-shadow: 0px 0px 4px 2px #7ca6df;
  padding: 2px 20px;
  border-radius: 10px;
  margin-top: 20px;
  font-size: 14px;
  color: white;
}

/* 浮动 */
.fl{
  float: left;
}
.fr{
  float: right;
}
.clear{
  clear: both;
}
</style>
